<template>
	<view class="wrapper" :style="colorTheme">
		<Head leftIcon="left" :border="false" title="收支明细"></Head>
		<view class="info">
			<view class="tabBtn">
				<view :class="index == 1 ? 'btn ac' : 'btn'" @click="changeTab(1)">获得记录</view>
				<view :class="index == 2 ? 'btn ac' : 'btn'" @click="changeTab(2)">消耗记录</view>
			</view>
			<Loading v-if="loading" height="calc(100% - 100rpx)"></Loading>
			<view v-else class="tabCon">
				<view class="con" v-show="index == 1">
					<view style="height: 100%;" v-if="list.length > 0">
						<scroll-view style="height: 100%;" scroll-y="true" @scrolltolower="scrolltolower">
							<view class="item" v-for="(item, index) in list" :key="index">
								<view class="t1">
									<view class="leftText substring">{{ item.content }}</view>
									<view class="rightText">+{{ item.points }}</view>
								</view>
								<view class="t2">{{ item.addtime }}</view>
							</view>
							<uni-load-more :status="loadmore" :contentText="contentText"></uni-load-more>
						</scroll-view>
					</view>
					<Empty v-else></Empty>
				</view>
				<view class="con" v-show="index == 2">
					<view style="height: 100%;" v-if="list.length > 0">
						<scroll-view style="height: 100%;" scroll-y="true" @scrolltolower="scrolltolower">
							<view class="item" v-for="(item, index) in list" :key="index">
								<view class="t1">
									<view class="leftText substring">{{ item.content }}</view>
									<view class="rightText color">-{{ item.points }}</view>
								</view>
								<view class="t2">{{ item.addtime }}</view>
							</view>
							<uni-load-more :status="loadmore" :contentText="contentText"></uni-load-more>
						</scroll-view>
					</view>
					<Empty v-else></Empty>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import handlerHttpError from '@/utils/error';
import http from '@/utils/http';
import api from '@/api';
export default {
	data() {
		return {
			// 切换
			index: 1,
			// 列表参数
			params: {
				type: 1,
				page: 1,
				pagesize: 15
			},
			// 列表
			list: [],
			// 上拉加载
			loadmore: 'more',
			contentText: {
				contentdown: '加载更多数据',
				contentrefresh: '加载中...',
				contentnomore: '暂无更多数据'
			},
			loading: true
		};
	},
	computed: {
		...mapState(['colorTheme'])
	},
	created() {
		this.getPointsList(true);
	},
	methods: {
		// 上拉加载
		scrolltolower() {
			this.loadmore = 'loading';
			this.params.page++;
			if (this.loadmore == 'noMore') return;
			this.getPointsList(false);
		},
		// 切换
		changeTab(index) {
			if (index == this.params.type) {
				return false;
			}
			this.index = index;
			this.params.type = index;
			this.params.page = 1;
			this.loadmore = 'more';
			this.getPointsList(true);
		},
		// 获取积分明细列表
		getPointsList(init) {
			http.get(api.member_pointslog, this.params).then(res => {
				if (res.code == 200) {
					let { items } = res.data;
					if (init) {
						this.list = [...items];
					} else {
						this.list = this.list.concat(items);
					}
					this.$nextTick(() => {
						this.loading = false;
					});
					if (items.length < this.params.pagesize) {
						if (init === false) {
							this.loadmore = 'noMore';
						} else if (items.length == 0) {
							this.loadmore = 'noMore';
						}
					}
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.wrapper {
	width: 100%;
	height: 100%;
	.info {
		height: calc(100% - 140rpx);
		overflow-y: auto;
		.tabBtn {
			border-bottom: 1rpx solid #ededed;
			display: flex;
			align-items: center;
			justify-content: center;
			.btn {
				flex: 1;
				text-align: center;
				padding: 30rpx 0;
				position: relative;
				&::before {
					content: '';
					position: absolute;
					bottom: -2rpx;
					left: 50%;
					transform: translateX(-50%);
					width: 34rpx;
					height: 5rpx;
					// background: $textActiveColor;
					display: none;
				}
				&.ac::before {
					display: block;
				}
			}
		}
		.tabCon {
			height: calc(100% - 100rpx);
			.con {
				height: 100%;
				.item {
					padding: 30rpx 36rpx;
					border-bottom: 1rpx solid #ededed;
					.t1 {
						display: flex;
						justify-content: space-between;
						margin-bottom: 10rpx;
						.leftText {
							color: #333333;
							font-size: 26rpx;
							font-weight: bold;
							flex-shrink: 0;
							width: 500rpx;
						}
						.rightText {
							color: #2755ff;
							font-size: 26rpx;
							flex-shrink: 0;
							width: 100rpx;
							text-align: right;
							&.color {
								color: #ff4030;
							}
						}
					}
					.t2 {
						color: #999999;
						font-size: 26rpx;
					}
				}
			}
		}
	}
}
</style>
